<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            text-align: center;
            font-size: 33px;
            color: rgb(122, 5, 73);
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>-->
<!--<script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.core.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>

    // 添加事件  鼠标进入后500秒后才运行计算，，500内 鼠标移除重新计算
    // box.addEventListener('mousemove',mouseMove)  //没有任何的防抖处理
    // 1.可以使用 _lodashi.desbonse()的插件函数来解决
    // box.addEventListener('mousemove',_.debounce ('mouseMove',500))
    // 1.手写防抖
    const box = document.querySelector('.box')
    let i = 1;

    function mouseMove() {
        box.innerHTML = i++;
    }

    // ***防抖：在事件被触发时，延迟n秒后再触发回调函数，如果n秒内又触发了事件，则会重新开始计算时间（n秒内最后一次生效）
    // 输入框的搜索功能    页面resize事件
    // 1.声明定时器变量
    // 2.每一次鼠标移动的时候（出发事件）都需要判断是否有定时器，如果是有定时器的话先清空以前的定时器
    // 3.如果是没有定时器  开启定时器 ，存入定时器变量到里面去
    // 4.定时器里面写函数调用
    // function debounce(fn,t){
    //     let timer = null;                    //定义定时器
    //     return function (){                  //写2，3，4业务逻辑
    //         if (timer) clearTimeout(timer)   //判断是否存在定时器，如果存在就清空
    //         timer = setTimeout(function (){  //不存在定时器时 开启定时器 （也可以setInterval（）函数）
    //             fn()                         //定时器的每一个时间里调业务函数
    //         },t)
    //     }
    // }
    // box.addEventListener('mousemove',debounce(mouseMove,500))  //在实例中使用防抖函数


    // ***节流：一段时间内只能触发一次，如果这段时间内触发多次事件，只有第一次生效会触发回调函数，一段时间过后才能再次触发（n秒内第一次生效）
    // 轮播图滚动加载
    // box.addEventListener('mousemove',_.throttle(mouseMove,500))   //lodash的 throttle 方法
    // 手写
    function throttle(fn, t) {
        let timer = null;
        return function () {
            if (!timer) {
                timer = setTimeout(function () {
                    fn()           //定时器里调用业务函数
                    timer = null;  //清空定时器  不能用clearTimeout，是因为定时器还在运行中，定时器里不能清空定时器
                }, t)
            }
        }
    }
    box.addEventListener('mousemove', throttle(mouseMove, 500))


</script>
